import React, { Component } from "react";
import { Icon } from "react-vant";
import { getShopList, getDepartSearch } from "../api/index";
import debounce from "../utils/debounce";
import { PullRefresh } from "react-vant";

export default class shopList extends Component {
  state = {
    DepartmentList: [],
    iptvalue: "",
  };
  getList() {
    getShopList().then((res) => {
      this.setState({
        DepartmentList: res.data.data,
      });
    });
  }
  componentDidMount() {
    this.getList();
  }
  onRefresh = () => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(true);
        this.getList();
      }, 1000);
    });
  };
  //搜索
  getDepartSearch = async (value) => {
    await this.setState({
      iptvalue: value,
    });
    debounce(async () => {
      let res = await getDepartSearch({ value: this.state.iptvalue });
      this.setState({
        DepartmentList: res.data.data,
      });
    }, 1000);
  };

  //返回上一级
  goBack() {
    this.props.history.push("/home/shop");
  }
  //跳转详情
  goDetail(item) {
    this.props.history.push({
      pathname: `departDetail/${item.id}`,
      state: { data: item },
    });
  }
  render() {
    const { DepartmentList, iptvalue } = this.state;
    return (
      <div className="department">
        <div className="header">
          <Icon
            name="arrow-left"
            size="20"
            onClick={() => {
              this.goBack();
            }}
          />
          <div>商品列表</div>
          <span></span>
        </div>
        <div className="content">
          <input
            type="text"
            placeholder="🔍输入关键字搜索科普文章"
            value={iptvalue}
            onInput={(e) => {
              this.getDepartSearch(e.target.value);
            }}
            className="search"
          />
          <div className="list-box">
            <PullRefresh successText="刷新成功" onRefresh={this.onRefresh}>
              {DepartmentList.map((item, idx) => {
                return (
                  <div
                    className="list"
                    key={idx}
                    onClick={() => {
                      this.goDetail(item);
                    }}
                  >
                    <dl>
                      <dt>
                        <img src={item.img} alt="" />
                      </dt>
                      <dd>
                        <div>{item.title}</div>
                        <div>
                          <span>￥{item.price}</span>
                          <span>处方药</span>
                        </div>
                      </dd>
                    </dl>
                  </div>
                );
              })}
            </PullRefresh>
          </div>
        </div>
      </div>
    );
  }
}
